<template>
  <div>
    <div>
        <img src="https://cangdu.org/elm/#/shop/shopDetail" alt="">
      </div>
     <router-link to="/login">
    <div class="mine-head">
      <img src="http://elm.cangdu.org/img/default.jpg"
           class="head-img">
          
      <div class="mine-info">
        <div class="name">登录/注册</div>
        <p class="phone">暂无绑定手机号</p>
      </div>
      <i class="iconfont icon-youjiantou"></i>
    </div>
     </router-link>
    <div class="info-data">
      <ul>
        <li>
          <p class="info-data-top"><span class="money">0.00</span>元</p>
          <div class="info-data-bottom"><span>我的余额</span></div>
        </li>
        <li>
          <p class="info-data-top"><span class="ge">3</span>个</p>
          <div class="info-data-bottom"><span>我的优惠</span></div>
        </li>
        <li>
          <p class="info-data-top"><span class="score">0</span>分</p>
          <div class="info-data-bottom"><span>我的几分</span></div>
        </li>
      </ul>
    </div>

    <div class="profile-1reTe">
      <ul>
        <li>
          <i class="iconfont icon-fanhui"></i>
          <div class="myorder-div">
            <span>我的订单</span>
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </li>
                <li>
          <i>1</i>
          <div class="myorder-div">
            <span>积分商城</span>
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </li>
                <li>
          <i>1</i>
          <div class="myorder-div">
            <span>饿了么会员卡</span>
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </li>
      </ul>
    </div>

        <div class="profile-1reTe">
      <ul>
        <li>
          <i>1</i>
          <div class="myorder-div">
            <span>服务中心</span>
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </li>
                <li>
          <i>1</i>
          <div class="myorder-div">
            <span>下载饿了么App</span>
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
export default {
created () {
  this.bus.$emit('loading', true);
}
}
</script>

<style lang="less">
.mine-head {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 15px 16px;
  align-items: center;
  background-color: #3190e8;
  img {
    width: 59px;
    border-radius: 50%;
  }
  .mine-info {
    width: 266px;
    height: 59px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #fff;
    .name {
      font-size: 18px;
      font-weight: 600;
    }
    .phone {
      font-size: 13px;
    }
  }

  i {
    color: #fff;
    font-size: 22px;
  }
}

.info-data {
  background-color: #fff;
  ul {
    display: flex;
    li {
      width: 33.3%;
      height: 84.2px;
      box-sizing: border-box;
      border-right: 1px solid #e3e3e3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .info-data-top {
        font-size: 12px;
        color: #333;
        text-align: center;
        span {
          font-size: 28px;
          font-weight: 600;
        }
        .money{
          color: #ff9900;
        }
        .ge{
          color: red;
        }
        .score{
          color: green;
        }
      }
      .info-data-bottom{
        font-size: 12px;
        color: #666;
        text-align: center;
      }
    }
    li:last-of-type {
      border: none;
    }
  }
}

.profile-1reTe{
  background-color: #fff;
  margin: 10px 0;
  ul{
    display: flex;
    flex-direction: column;
    li{
      display: flex;
      height: 42px;
      i{
        width: 37.5px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;
        padding-right: 10px;
      }
      .myorder-div{
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        border-bottom:1px solid #e4e4e4 ;
      }
    }
    li:last-of-type{
      .myorder-div{
        border-bottom: none;
      }
    }
  }
}
</style>